<template>
	<z-paging
		show-refresher-update-time
		show-refresher-when-reload
		bg-color="#f5f5f5"
		class="app app-bg"
		v-model="list"
		ref="paging"
		@query="queryList"
	>
		<view class="nav" slot="top" :style="'padding-top:' + statusBarHeight + 'px'">
			<!-- #ifdef MP -->
			<view style="padding-top: 22rpx">
				<u-icon
					name="arrow-left"
					color="#FFFFFF"
					size="36"
					@tap="vk.navigateBack()"
				></u-icon>
			</view>
			<text style="flex: 1; padding-top: 20rpx">优惠券中心</text>
			<view style="opacity: 0">
				<u-icon name="arrow-left" color="#FFFFFF" size="36"></u-icon>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view>
				<u-icon
					style="margin-top: 14rpx"
					name="arrow-left"
					color="#FFFFFF"
					size="36"
					@tap="vk.navigateBack()"
				></u-icon>
			</view>
			<text style="flex: 1; margin-top: 14rpx">优惠券中心</text>
			<view style="opacity: 0; margin-top: 14rpx">
				<u-icon name="arrow-left" color="#FFFFFF" size="36"></u-icon>
			</view>
			<!-- #endif -->
		</view>
		<block v-for="item in list" :key="item._id">
			<vk-mall-coupon :coupon="item" v-if="!item.hide"></vk-mall-coupon>
		</block>
	</z-paging>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// 状态栏高度
			statusBarHeight: systemInfo.statusBarHeight,
			list: []
		}
	},
	onLoad(options = {}) {
		this.options = options
	},
	methods: {
		// 获取优惠券列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "client/user.getMallCouponList",
				data: { pageSize, pageIndex }
			}).then(res => {
				this.$refs.paging.complete(res.rows)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.nav {
	padding: 20rpx;
	font-weight: 700;
	font-size: 32rpx;
	text-align: center;
	color: #ffffff;
	height: 574rpx;
	background: #f5f5f5
		url("https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/cloudstorage/e81433ce-7c81-4352-a220-a81305995f75.png")
		no-repeat;
	background-size: 100%;
	background-position: 0 calc(-16rpx);
	display: flex;
}
</style>
